<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vConsole Network面板测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-btn {
            background: #07c160;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
        }
        .test-btn:hover {
            background: #06ad56;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-family: monospace;
        }
        .success { background: #e6f7ff; border: 1px solid #91d5ff; }
        .error { background: #fff2e8; border: 1px solid #ffbb96; }
    </style>
</head>
<body>
    <h1>vConsole Network面板测试工具</h1>
    
    <div class="test-container">
        <h2>1. vConsole状态检查</h2>
        <button class="test-btn" onclick="checkVConsoleStatus()">检查vConsole状态</button>
        <div id="vconsole-status" class="status"></div>
    </div>

    <div class="test-container">
        <h2>2. 网络请求测试</h2>
        <button class="test-btn" onclick="testXHR()">测试XHR请求</button>
        <button class="test-btn" onclick="testFetch()">测试Fetch请求</button>
        <button class="test-btn" onclick="testAPI()">测试API调用</button>
        <button class="test-btn" onclick="testError()">测试错误请求</button>
        <div id="request-status" class="status"></div>
    </div>

    <div class="test-container">
        <h2>3. vConsole控制</h2>
        <button class="test-btn" onclick="showVConsole()">显示vConsole</button>
        <button class="test-btn" onclick="hideVConsole()">隐藏vConsole</button>
        <button class="test-btn" onclick="switchToNetwork()">切换到Network标签</button>
        <button class="test-btn" onclick="reloadVConsole()">重新加载vConsole</button>
    </div>

    <div class="test-container">
        <h2>4. 调试信息</h2>
        <div id="debug-info" class="status"></div>
    </div>

    <!-- 引入vConsole -->
    <script src="https://unpkg.com/vconsole@3.15.1/dist/vconsole.min.js"></script>
    <script>
        let vconsole = null;
        let testResults = [];

        // 初始化vConsole
        function initVConsole() {
            if (vconsole) {
                vconsole.destroy();
            }
            
            vconsole = new VConsole({
                theme: 'dark',
                defaultPlugins: ['system', 'network', 'element', 'storage'],
                maxLogNumber: 1000,
                onReady: function() {
                    console.log('🎉 vConsole已准备就绪');
                    setTimeout(() => {
                        if (vconsole.showTab) {
                            vconsole.showTab('network');
                        }
                    }, 500);
                }
            });
            
            console.log('✅ vConsole初始化完成');
        }

        // 检查vConsole状态
        function checkVConsoleStatus() {
            const status = document.getElementById('vconsole-status');
            let info = {
                vConsoleLoaded: typeof VConsole !== 'undefined',
                vConsoleInstance: !!vconsole,
                protocol: window.location.protocol,
                hostname: window.location.hostname,
                userAgent: navigator.userAgent,
                timestamp: new Date().toLocaleString()
            };
            
            status.innerHTML = JSON.stringify(info, null, 2);
            console.log('vConsole状态:', info);
        }

        // 测试XHR请求
        function testXHR() {
            const status = document.getElementById('request-status');
            
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
            xhr.onload = function() {
                const result = {
                    type: 'XHR',
                    status: xhr.status,
                    response: JSON.parse(xhr.responseText)
                };
                status.innerHTML = `XHR请求成功: ${xhr.status}`;
                status.className = 'status success';
                console.log('XHR测试结果:', result);
            };
            xhr.onerror = function() {
                status.innerHTML = 'XHR请求失败';
                status.className = 'status error';
                console.error('XHR请求失败');
            };
            xhr.send();
        }

        // 测试Fetch请求
        function testFetch() {
            const status = document.getElementById('request-status');
            
            fetch('https://jsonplaceholder.typicode.com/posts/2')
                .then(response => response.json())
                .then(data => {
                    const result = {
                        type: 'Fetch',
                        status: 200,
                        response: data
                    };
                    status.innerHTML = 'Fetch请求成功: 200';
                    status.className = 'status success';
                    console.log('Fetch测试结果:', result);
                })
                .catch(error => {
                    status.innerHTML = 'Fetch请求失败: ' + error.message;
                    status.className = 'status error';
                    console.error('Fetch请求失败:', error);
                });
        }

        // 测试API调用
        function testAPI() {
            const status = document.getElementById('request-status');
            
            // 测试多个请求
            Promise.all([
                fetch('https://jsonplaceholder.typicode.com/posts/3'),
                fetch('https://jsonplaceholder.typicode.com/users/1'),
                fetch('https://jsonplaceholder.typicode.com/comments?postId=1')
            ])
            .then(responses => Promise.all(responses.map(r => r.json())))
            .then(data => {
                status.innerHTML = 'API调用成功: 3个请求完成';
                status.className = 'status success';
                console.log('API测试结果:', data);
            })
            .catch(error => {
                status.innerHTML = 'API调用失败: ' + error.message;
                status.className = 'status error';
                console.error('API调用失败:', error);
            });
        }

        // 测试错误请求
        function testError() {
            const status = document.getElementById('request-status');
            
            fetch('https://jsonplaceholder.typicode.com/posts/999999')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('HTTP错误: ' + response.status);
                    }
                    return response.json();
                })
                .catch(error => {
                    status.innerHTML = '错误测试完成: ' + error.message;
                    status.className = 'status error';
                    console.log('错误测试结果:', error.message);
                });
        }

        // vConsole控制函数
        function showVConsole() {
            if (vconsole) {
                vconsole.show();
                console.log('vConsole已显示');
            } else {
                initVConsole();
            }
        }

        function hideVConsole() {
            if (vconsole) {
                vconsole.hide();
                console.log('vConsole已隐藏');
            }
        }

        function switchToNetwork() {
            if (vconsole && vconsole.showTab) {
                vconsole.showTab('network');
                console.log('已切换到Network标签');
            }
        }

        function reloadVConsole() {
            initVConsole();
            console.log('vConsole已重新加载');
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 页面加载完成，开始测试...');
            initVConsole();
            checkVConsoleStatus();
            
            // 显示调试信息
            const debugInfo = document.getElementById('debug-info');
            debugInfo.innerHTML = `
                <strong>调试指南：</strong><br>
                1. 打开vConsole (点击右下角绿色按钮)<br>
                2. 切换到Network标签<br>
                3. 点击上方测试按钮<br>
                4. 观察Network面板是否有请求记录
            `;
        });

        // 添加全局错误处理
        window.addEventListener('error', function(e) {
            console.error('全局错误:', e.error);
        });

        window.addEventListener('unhandledrejection', function(e) {
            console.error('未处理的Promise拒绝:', e.reason);
        });
    </script>
</body>
</html>